<!-- login -->
<template>
  <div class="login-register">
    <div class="contain">
      <div class="login-box" :class="{ active: isLogin }">
        <div class="login-contain" v-if="isLogin">
          <h1>登录</h1>
          <el-form
            :model="loginForm"
            status-icon
            :rules="rules"
            ref="loginForm"
            label-width="70px"
            class="login-form"
          >
            <el-form-item label="账号" prop="username">
              <el-input v-model.number="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                autocomplete="off"
                onfocus="this.removeAttribute('readonly');"
                onblur="this.readOnly = 'readonly'"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              ><el-button type="text">忘记密码?</el-button></el-form-item
            >

            <el-form-item style="text-align: center">
              <el-button
                style="width: 40%"
                type="primary"
                @click="submitForm('loginForm')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="login-contain" v-else>
          <h1>注册</h1>
          <el-form
            :model="loginForm"
            status-icon
            :rules="rules"
            ref="loginForm"
            label-width="100px"
            class="login-form"
          >
            <el-form-item label="账号" prop="username">
              <el-input v-model.number="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                autocomplete="off"
                onfocus="this.removeAttribute('readonly');"
                onblur="this.readOnly = 'readonly'"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              label="确认密码"
              key="checkPass"
              :prop="`${!isLogin} ? 'checkPass' : ''`"
            >
              <el-input
                type="password"
                v-model="loginForm.checkPass"
                autocomplete="off"
                onfocus="this.removeAttribute('readonly');"
                onblur="this.readOnly = 'readonly'"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button
                style="width: 40%"
                type="primary"
                @click="registerSubmitForm('loginForm')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="small-box" :class="{ active: isLogin }">
        <div class="small-contain" v-if="isLogin">
          <div class="stitle">你好，朋友!</div>
          <p class="scontent">开始注册，和我们一起旅行</p>
          <el-button style="width: 60%" @click="changeType" round
            >注册</el-button
          >
        </div>
        <div class="small-contain" v-else>
          <div class="stitle">欢迎回来!</div>
          <p class="scontent">与我们保持联系，请登录你的账户</p>
          <el-button style="width: 60%" @click="changeType" round
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login-register",
  components: {},
  data() {
    // 账号验证
    var validateVsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      callback();
    };
    // 密码验证
    var validatePass = (rule, value, callback) => {
      console.log("密码验证", value);
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.loginForm.checkPass !== "") {
          this.$refs.loginForm.validateField("checkPass");
        }
        callback();
      }
    };
    // 确认密码
    var validatePass2 = (rule, value, callback) => {
      console.log("确认密码 ", value);
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //这里存放数据
    return {
      isLogin: true,
      loginForm: {
        username: "",
        password: "",
        checkPass: "",
      },
      rules: {
        username: [
          { required: true, validator: validateVsername, trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    changeType() {
      this.isLogin = !this.isLogin;
      this.loginForm.username = "";
      this.loginForm.password = "";
      this.loginForm.checkPass = "";
      this.$refs.loginForm.resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push({ path: "/" });
        } else {
          this.$message.error("账号或密码不能为空");
          return false;
        }
      });
    },
    // 注册
    registerSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log("valid", valid);
        if (valid) {
          // this.$message({
          //   message: "注册功能暂不开放",
          //   type: "success",
          // });
          this.$router.push({ path: "/" });
        } else {
          this.$message.error("账号或密码不能为空");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
//@import url(); 引入公共css类
.login-register {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url("~@/assets/images/login.jpg");
  background-position: left top, right bottom, left top;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: cover;
  box-sizing: border-box;
  .contain {
    width: 50%;
    height: 50%;
    min-height: 460px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 3px #f0f0f0, 0 0 6px #f0f0f0;
    .login-box {
      width: 60%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 40%;
      transform: translateX(0%);
      transition: all 1s;
      .login-contain {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .login-form {
          width: 90%;
          padding-right: 30px;
        }
      }
    }
    .login-box.active {
      left: 0;
      transition: all 0.5s;
    }
    .small-box {
      width: 40%;
      height: 100%;
      // background: linear-gradient(135deg, rgb(57, 167, 176), rgb(56, 183, 145));
      background: linear-gradient(135deg, #41d8dd, #5583ee);
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(0%);
      transition: all 1s;
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit;
      color: #fff;
      .small-contain {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    .small-box.active {
      left: 100%;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
      transform: translateX(-100%);
      transition: all 1s;
    }
  }
}
</style>
